<template>
  <div>
    <nav-bar>
      <img slot="left" @click="$router.back()" class="back" src="../../../assets/img/navbar/ic_title_close.png" alt="">
      <img slot="right" class="right" src="../../../assets/img/navbar/ic_share.png" alt=""  @click="show = !show">
      <!-- <img slot="right" class="right" src="../../../assets/img/navbar/ic_share.png" alt=""  @click="call('wechatFriend')"> -->
    </nav-bar>
    <div class="iframe">
      <!-- <iframe width="750px" height="100%" src="https://mob.277sy.com/index.php/apppage/couponShop?goodsid=5" frameborder="0"></iframe> -->
      <iframe width="750px" height="100%" :src="$route.query.url" frameborder="0"></iframe>
    </div>
    <share-popup 
      :show="show" 
      @close-click="closeClick" 
      @share-link="shareLink"
      id="copy_text"
      :data-clipboard-text="$route.query.url"/>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
import SharePopup from '../../../components/common/sharepopup/SharePopup.vue'
import NativeShare from 'nativeshare'
import Clipboard from 'clipboard'

  export default {
    components: { NavBar, SharePopup },
    data() {
      return {
        show: false,
        title1: '',
        title2: '',
      }
    },
    created () {
      if(this.$route.query.title1) {
        this.title1 = this.$route.query.title1
      }
    },
    methods: {
      closeClick() {
        console.log(1);
        this.show = !this.show
      },
      shareLink(val) {
        switch (val) {
          case 0:
            this.call('wechatFriend')
            break;
          case 1:
            this.call('wechatTimeline')
            break;
          case 2:
            this.call('qqFriend')
            break;
          case 3:
            this.call('qZone')
            break;
          case 4:
            this.copyClick()
            break;
        }
      },
      call(command) {
        var nativeShare = new NativeShare()
        var shareData = {
            title: this.title1,
            desc: this.title2,
            // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
            link: this.$route.query.url,
            // icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
            // 不要过于依赖以下两个回调，很多浏览器是不支持的
            success: function() {
                this.$toast('分享成功')
            },
            fail: function() {
                this.$toast('分享失败')
            }
        }
        nativeShare.setShareData(shareData)
          try {
              nativeShare.call(command)
          } catch (err) {
              // 如果不支持，你可以在这里做降级处理
              console.log(err.message)
          }
      },
      copyClick() {
        let clipboard = new Clipboard('#copy_text')
        clipboard.on('success', e => {
          this.$toast('已复制到剪切板')
          clipboard.destroy() // 释放内存
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$toast('该浏览器不支持复制')
          clipboard.destroy() // 释放内存
        })
      }
    },
  }
</script>

<style scoped>
.back {
  width: 44px;
  height: 44px;
}

.right {
  width: 45px;
  height: 45px;
}

.iframe {
  position: fixed;
  width: 750px;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  overflow: scroll;
}
</style>